<!--
 * @Date: 2022-03-25 15:42:13
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-03-25 16:41:40
 * @FilePath: \vue3Components\src\components\trend\Trend.vue
 * @Description: 趋势标记
-->
<template>
  <div class="trend">
    <div class="textShowArea" :style="{ color: textColor }">
      <slot v-if="slots.default"></slot>
      <div class="text" v-else>{{ text }}</div>
    </div>
    <div class="icon">
      <component
        :is="`el-icon-${toLine(upIcon)}`"
        v-if="type == 'up'"
        :style="{ color: !reverseColor ? upIconColor : '#41b482' }"
      ></component>
      <component
        :is="`el-icon-${toLine(downIcon)}`"
        v-else
        :style="{ color: !reverseColor ? downIconColor : '#f5222d' }"
      ></component>
    </div>
  </div>
</template>
 <script lang='ts' setup>
import { useSlots, computed } from 'vue'
import { toLine } from '../../utils'
const props = defineProps({
  //上升or下降
  type: {
    type: String,
    default: 'up'
  },
  text: {
    type: String,
    default: '我是一段文字'
  },
  upIconColor: {
    type: String,
    default: '#f5222d'
  },
  downIconColor: {
    type: String,
    default: '#41b482'
  },
  reverseColor: {
    type: Boolean,
    default: false
  },
  upTextColor: {
    type: String,
    default: '#000'
  },
  downTextColor: {
    type: String,
    default: '#000'
  },
  upIcon: {
    type: String,
    default: 'arrowup'
  },
  downIcon: {
    type: String,
    default: 'arrowdown'
  }
})
let textColor = computed(() => {
  return props.type == 'up' ? props.upTextColor : props.downTextColor
})
const slots = useSlots()
</script>
<style lang='less' scoped>
.trend {
  display: flex;
  align-items: center;
  .text {
    font-size: 14px;
    margin-right: 4px;
  }
  .icon {
    svg {
      width: 0.8em;
      height: 0.8em;
    }
  }
}
</style>